<template>
  <view class="prizeDraw">
    <view class="caidai">
      <view class="title">幸运大抽奖</view>
      <view class="prize_num">剩余抽奖次数: {{ prizeNum }}</view>
      <view class="prize_box">
        <view class="notice">
          <image
            src="https://www.banbanhuo.com/minio/banbanhuo/50b5b42cec24763b6dd4fe69f91655072c4cd2e77b66f4146a3c1ea270d212e0.png" />
          <view class="notice_text">{{ notice.length > 0 ? (notice[index] as any).name : '' }}</view>
        </view>
        <view class="box">
          <view class="box_item" :class="index === currentIndex ? 'active' : ''" v-for="(item, index) in prizeList"
            :key='item.id' @click="getPrizeInfo(item)">
            <image v-if="item.name == '谢谢参与'"
              src="https://www.banbanhuo.com/minio/banbanhuo/25fc3cffb43848d2f96860e08df72600d28a96ee13e377b6ff893a1ee170eb84.png" />
            <image v-if="item.name == '开始'"
              src="https://www.banbanhuo.com/minio/banbanhuo/a0daf9e12021f20565ec16acfdd6edf8e1c7d1223aa60d08318496151a39e4a9.png" />
            <image v-if="item.isMouey"
              src="https://www.banbanhuo.com/minio/banbanhuo/1c3bd7ccbc0cdf072fd15c9ebfd423290d4bc2da7b8d44529a42ad4737a5b8af.png" />
            <view class="prize_name" v-if="item.isMouey"> {{ item.name }}</view>
            <view class="prize_money" v-if="item.isMouey"> {{ item.money }}元</view>
          </view>
        </view>
      </view>
      <view class="rules">
        <view class="rule_title">
          活动规则：
        </view>
        <view class="rule">
          1. 新用户注册获取1次奖机会；
        </view>
        <view class="rule">
          2. 中奖现金将直接发放至微信账户；
        </view>
        <view class="rule">
          3. 如中奖需要您填写个人身份信息；
        </view>
        <view class="rule">
          4. 本活动最终解释权归平台所有。
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { getDrawList, getDraw, draw, drawRecord } from '@/api/other/draw'
import { useMemberStore } from '@/stores';
import { phoneMask } from '@/utils/index';

onMounted(() => {
  getPrizeNum()
  getNoticeList()
})

onUnmounted(() => {
  clearInterval(interval.value as number)
})

// 中奖通知 
const interval = ref<number | null>(null)

const notice = ref([
  // { id: 1, name: '恭喜用户183******1772抽中了200元！' },
  // { id: 2, name: '恭喜用户183******1773抽中了5元！' },
  // { id: 3, name: '恭喜用户183******1774抽中了100元！' },
  // { id: 4, name: '恭喜用户183******1775抽中了50元！' },
])

// 当前通知的index
const index = ref(0)

// 自动切换通知内容
const autoNotice = () => {
  interval.value = setInterval(() => {
    index.value++
    if (index.value > notice.value.length - 1) {
      index.value = 0
    }
  }, 3000)
}
// 获取中奖列表
const getNoticeList = async () => {
  const res: any = await getDrawList()
  if (res.data.length > 0) {
    notice.value = res.data.map((item: any) => {
      return {
        id: item.id,
        name: '恭喜用户' + phoneMask(item.mobile) + '抽中了' + item.money + '元！'
      }
    })
  }
  autoNotice()
}

// 抽奖列表
const prizeList = ref([
  { id: 0, name: '一等奖', money: 200, isMouey: true },
  { id: 1, name: '鼓励奖', money: 5, isMouey: true },
  { id: 2, name: '三等奖', money: 50, isMouey: true, },
  { id: 3, name: '谢谢参与', isMouey: false, },
  { id: 4, name: '开始', isMouey: false, },
  { id: 5, name: '鼓励奖', money: 5, isMouey: true, },
  { id: 6, name: '二等奖', money: 100, isMouey: true, },
  { id: 7, name: '鼓励奖', money: 5, isMouey: true, },
  { id: 8, name: '谢谢参与', isMouey: false, }
])
// 抽奖次数
const prizeNum = ref(0)
// 查询抽奖次数
const getPrizeNum = async () => {
  const par = {
    openId: useMemberStore().userInfo.openid,
    userId: useMemberStore().userInfo.userId
  }
  const res: any = await getDraw(par)
  if (res.code == 0) {
    prizeNum.value = res.data
  }
}
// 奖品
const prizeId = ref(8)
// 查询奖品
const getPrizeInfo = async (item: any) => {
  if (item.id != 4) return
  if (isRunning.value) return
  if (prizeNum.value <= 0) {
    uni.showToast({
      title: '您已没有抽奖机会了~!',
      icon: 'none'
    })
    return
  }
  // providePrize()
  // return
  const par = {
    openId: useMemberStore().userInfo.openid,
    userId: useMemberStore().userInfo.userId
  }
  const res: any = await draw(par)
  if (res.code == 0) {
    const prizeName = res.data
    if (prizeName == '一等奖') {
      prizeId.value = 0
    }
    if (prizeName == '二等奖') {
      prizeId.value = 6
    }
    if (prizeName == '三等奖') {
      prizeId.value = 2
    }
    if (prizeName == '鼓励奖') {
      const flag = getRandom()
      if (flag) {
        prizeId.value = 5
      } else {
        prizeId.value = 7
      }
    }
    if (prizeName == '谢谢参与') {
      const flag = getRandom()
      if (flag) {
        prizeId.value = 4
      } else {
        prizeId.value = 8
      }
    }
    start()
  }
}
// 获取一个随机整数 并且判断是奇数还是偶数
const getRandom = () => {
  const num = Math.floor(Math.random() * 100)
  if (num % 2 == 0) {
    return true
  } else {
    return false
  }
}
// 是否正在抽奖
const isRunning = ref(false)
// 抽奖转动的速度(初始为10ms)
const speed = ref(50)
// 需要跑的次数(每圈8次 跑4圈 加上奖品的sortIndex)
const totalRunCount = computed(() => {
  const index = prizeSort.findIndex((item: number) => prizeId.value == item)
  return 8 * 4 + index + 1
})
// 当前次数
const currentCount = ref(0)
// 奖品高亮顺序(4是抽奖按钮)
const prizeSort = [0, 1, 2, 5, 8, 7, 6, 3]
// 当前高亮的index
const currentIndex = ref(-1)

// 开始抽奖
const start = () => {
  isRunning.value = true
  currentIndex.value = 0
  run()
}

const timer = ref<number | null>(null)

// 高亮格子每次移动的函数
const run = () => {
  stop()
  if (currentCount.value == totalRunCount.value) {
    isRunning.value = false
    done()
    return
  }
  // 计算当前高亮的index
  currentIndex.value = prizeSort[currentCount.value % 8]
  timer.value = setTimeout(() => {
    // 调整speed 当前为全程的1/3时速度为50ms 到2/3时为100ms 3/4时为200 3/4到倒数前3个时 为500m 最后3步 800ms
    if (currentCount.value >= totalRunCount.value * 1 / 3 && currentCount.value < totalRunCount.value * 2 / 3) {
      speed.value = 100
    } else if (currentCount.value >= totalRunCount.value * 2 / 3 && currentCount.value < totalRunCount.value * 3 / 4) {
      speed.value = 200
    } else if (currentCount.value >= totalRunCount.value * 3 / 4 && currentCount.value < totalRunCount.value - 3) {
      speed.value = 500
    } else if (currentCount.value >= totalRunCount.value - 3) {
      speed.value = 800
    }
    currentCount.value++
    run()
  }, speed.value)
}

const stop = () => {
  timer.value && clearInterval(timer.value as number)
}

const done = () => {
  const prize: any = prizeList.value.find((item: any) => item.id == prizeId.value)

  if (!prize.isMouey) {
    uni.showToast({
      title: '谢谢参与!',
      icon: 'none'
    })
  } else {
    providePrize()
    uni.showToast({
      title: `恭喜您获得${prize.name}`,
      icon: 'none'
    })
  }
  speed.value = 50
  currentCount.value = 0
  prizeNum.value--
}
// 发放奖励
const providePrize = async () => {
  const par = {
    openId: useMemberStore().userInfo.openid,
    userId: useMemberStore().userInfo.userId
  }
  const res: any = drawRecord(par)
  console.log(res);

}
</script>

<style lang="scss" scoped>
.prizeDraw {
  width: 750rpx;
  height: 100vh;
  background-image: url("https://www.banbanhuo.com/minio/banbanhuo/ffbd7e73ab7b2df2e775915f7186a0b660fbe327d9ee3db7c08f0d0a0e854f8a.png");
  background-size: 750rpx 100vh;
  background-repeat: no-repeat;
  overflow: hidden;
}

.caidai {
  width: 750rpx;
  height: 100vh;
  background-image: url("https://www.banbanhuo.com/minio/banbanhuo/096737497d28984722e4c631f833830600785f23308b24d771dcb10dbb9aa8a7.png");
  background-size: 750rpx 100vh;
  background-repeat: no-repeat;
  overflow: hidden;
}


.title {
  font-weight: 700;
  font-size: 52rpx;
  color: #fff;
  text-align: center;
  margin-top: 32rpx;
  letter-spacing: 0.1em;
}

.prize_num {
  font-size: 25rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6rpx;
  text-align: center;
}

.prize_box {
  width: 694rpx;
  height: 824rpx;
  background: #ED3720;
  box-shadow: 0rpx 8rpx 12rpx -2rpx rgba(0, 0, 0, 0.1), 0rpx 4rpx 8rpx -4rpx rgba(0, 0, 0, 0.1);
  border-radius: 24rpx;
  margin: 0 auto;
  margin-top: 24rpx;
  overflow: hidden;
}

.notice {
  width: 600rpx;
  height: 50rpx;
  border-radius: 25rpx;
  background-color: #D30C16;
  margin: 24rpx auto;
  border: 1rpx solid #FFFFFF;
  color: #fff;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  padding: 12rpx;
  box-sizing: border-box;
  opacity: 0.8;
  overflow: hidden;

  .notice_text {
    animation: noticebar-slide 3s linear infinite;
  }

  image {
    width: 24rpx;
    height: 24rpx;
    margin-right: 12rpx;
  }
}

.box {
  width: 600rpx;
  height: 600rpx;
  margin: 0 auto;
  margin-top: 24rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  .box_item {
    width: 189rpx;
    height: 189rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    &:nth-child(5) {
      color: #fff;
      background: linear-gradient(45deg, #FFD700 0%, #FFA500 100%), rgba(0, 0, 0, 0);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      border: 4rpx solid #FFD700;
    }

    image {
      width: 80rpx;
      height: 80rpx;
    }

    .prize_name {
      font-size: 24rpx;
      font-family: 'DIN';
      color: #333;
      font-weight: 600;
      margin-top: 12rpx;
    }

    .prize_money {
      font-size: 24rpx;
      font-family: 'DIN';
      font-weight: 600;
      color: #FF7B32;
    }
  }

  .active {
    background-color: rgba(0, 0, 0, .6);

    .prize_name {
      color: #fff;
    }
  }
}

.rules {
  width: 694rpx;
  background: #ED3720;
  box-shadow: 0rpx 8rpx 12rpx -2rpx rgba(0, 0, 0, 0.1), 0rpx 4rpx 8rpx -4rpx rgba(0, 0, 0, 0.1);
  border-radius: 24rpx;
  margin: 0 auto;
  margin-top: 36rpx;
  padding: 24rpx;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.8);

  .rule_title {
    font-size: 32rpx;
    font-weight: 700;
    margin-bottom: 24rpx;
  }

  .rule {
    font-size: 28rpx;
    line-height: 42rpx;
  }
}

@keyframes noticebar-slide {
  0% {
    transform: translateY(100%);
  }

  30% {
    transform: translateY(0);
  }

  70% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

// https://www.banbanhuo.com/minio/banbanhuo/ffbd7e73ab7b2df2e775915f7186a0b660fbe327d9ee3db7c08f0d0a0e854f8a.png 背景
// https://www.banbanhuo.com/minio/banbanhuo/096737497d28984722e4c631f833830600785f23308b24d771dcb10dbb9aa8a7.png 彩带</style>
